<template>
   
    <el-tabs v-model="activeName" type="card" class="e-tab">
       <el-tab-pane label="数据基础" name="first">

         <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item label="计划开始日期">
           <el-date-picker type="date" class="e-date" placeholder="日期选择" v-model="formInline.date1" style="width: 80%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="计划结束日期">
            <el-date-picker type="date" class="e-date" placeholder="日期选择" v-model="formInline.date2" style="width: 80%;"></el-date-picker>
          </el-form-item>
         
          <el-form-item label="未来N天功率">
            <el-input v-model="formInline.user" class="e-input" style="width: 80%;"></el-input>
            <span>&nbsp;&nbsp;MW</span>
          </el-form-item>
          <el-form-item label="剩余可调用量">
              <el-input v-model="formInline.user" class="e-input" style="width: 80%;"></el-input>
              <span>&nbsp;&nbsp;MW·H</span>
          </el-form-item>
          <el-divider></el-divider>
            <el-form-item label="每日平均功率">
              <el-input v-model="formInline.name" class="e-input"  style="width: 50%;"></el-input>
              <span>&nbsp;&nbsp;单位:MW</span>
            </el-form-item> 

         <el-descriptions  direction="vertical" :column="10" border class="e-des">
           <el-descriptions-item label-class-name="e-label" label="第1天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第2天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第3天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第4天">
            <el-input v-model="formInline.user" class="e-iput"></el-input>
           </el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第5天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第6天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第7天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第8天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第9天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
           <el-descriptions-item label-class-name="e-label" label="第10天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
              <el-descriptions-item label-class-name="e-label" label="第11天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
                 <el-descriptions-item label-class-name="e-label" label="第12天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
               <el-descriptions-item label-class-name="e-label" label="第13天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
               <el-descriptions-item label-class-name="e-label" label="第14天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>   
               <el-descriptions-item label-class-name="e-label" label="第15天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item> 
               <el-descriptions-item label-class-name="e-label" label="第16天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item> 
                  <el-descriptions-item label-class-name="e-label" label="第17天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item> 
                  <el-descriptions-item label-class-name="e-label" label="第18天"><el-input v-model="formInline.user" class="e-iput" ></el-input></el-descriptions-item>   
                 <el-descriptions-item label-class-name="e-label" label="第19天"><el-input v-model="formInline.user" class="e-iput" ></el-input></el-descriptions-item>
                   <el-descriptions-item label-class-name="e-label" label="第20天"><el-input v-model="formInline.user" class="e-iput"  ></el-input></el-descriptions-item>
         </el-descriptions>
        </el-form>


     </el-tab-pane>
       <el-tab-pane label="水口" name="second">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="每日平均功率">
            <el-input v-model="formInline.user" class="e-iput" style="width: 50%;"></el-input>
            <span>&nbsp;&nbsp;单位:MW</span>
          </el-form-item> 

       <el-descriptions  direction="vertical" :column="10" border class="e-des">
         <el-descriptions-item label-class-name="e-label" label="第1天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第2天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第3天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第4天">
          <el-input v-model="formInline.user" class="e-iput" style="width: 80%;"></el-input>
         </el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第5天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第6天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第7天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第8天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第9天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
         <el-descriptions-item label-class-name="e-label" label="第10天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
        <el-descriptions-item label-class-name="e-label" label="第11天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
        <el-descriptions-item label-class-name="e-label" label="第12天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
        <el-descriptions-item label-class-name="e-label" label="第13天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>
        <el-descriptions-item label-class-name="e-label" label="第14天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item>   
        <el-descriptions-item label-class-name="e-label" label="第15天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item> 
        <el-descriptions-item label-class-name="e-label" label="第16天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item> 
        <el-descriptions-item label-class-name="e-label" label="第17天"><el-input v-model="formInline.user" class="e-iput"></el-input></el-descriptions-item> 
        <el-descriptions-item label-class-name="e-label" label="第18天"><el-input v-model="formInline.user" class="e-iput" ></el-input></el-descriptions-item>   
        <el-descriptions-item label-class-name="e-label" label="第19天"><el-input v-model="formInline.user" class="e-iput" ></el-input></el-descriptions-item>
        <el-descriptions-item label-class-name="e-label" label="第20天"><el-input v-model="formInline.user" class="e-iput" ></el-input></el-descriptions-item>
       </el-descriptions>
        </el-form>
     </el-tab-pane>
       <el-tab-pane label="水东" name="third">
       水东
     </el-tab-pane>
       <el-tab-pane label="嵩滩" name="fourth">
       定时任务补偿
     </el-tab-pane>
       <el-tab-pane label="界面" name="five">
       定时任务补偿
     </el-tab-pane>
     </el-tabs>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      activeName: 'first',
      formInline: {
               
                date1: '',
                date2: ''
               
     }
    }
  }
}
</script>
<style lang="scss" scoped>

.e-des ::v-deep .el-descriptions__body{background-color: transparent;}
.e-des ::v-deep .el-input__inner{
  background-color: rgba(106,224,224,0.25);
  border:none;
  color:rgb(49 212 194);
  padding: 5px
}
.e-des ::v-deep .el-descriptions-item__label.is-bordered-label{
  background-color: transparent;
  color:rgb(49 212 194);
  text-align: center
}
.e-date ::v-deep .el-input__inner{background-color: rgba(106, 224, 224, 0.25); color: #31d4c2;border:none;}
.e-date ::-webkit-input-placeholder{
  color: #31d4c2
}
.e-date ::v-deep .el-input__prefix, .el-input__suffix{color:rgb(49 212 194);}
.e-tab{background: transparent}
.e-tab span{ color: #31d4c2}
.e-tab ::v-deep .el-tabs__item.is-active { color: #41dcdcf7}
.e-tab ::v-deep .el-tabs__item{color: rgba(185,255,247,0.87)}
.e-tab ::v-deep .el-form-item__label { color: rgb(49 212 194)}
.e-des ::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
    border: 1px solid rgba(67,139,131,0.7);
    padding: 12px 10px;

}
.e-tab ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{background: rgb(67,139,131,0.42);border-bottom-color:rgba(67,139,131,0.7);}
.e-tab ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item{
 border-left: 1px solid rgba(67,139,131,0.7)}
.e-tab ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav{
  border: 1px solid rgba(67,139,131,0.7);
}
.e-input{
  background:rgba(106,224,224,0.25);
 
}
.e-input ::v-deep .el-input__inner{
    background-color: transparent;
    color:rgb(49 212 194);
    border:none;
  }
.el-divider{}
</style>